<template>
  <div>
    <img :src="imageSrc" :title="title" :style="styleObj" @click="getAPStream">
  </div>
</template>

<script>
export default {
  name: "GqImage",
  props: {
    //数据域名称
    dataField: {default: ''},
    //是否只读，默认为 true
    readonly: {type: Boolean, default: true},
    //是否必填，默认为 false
    required: {type: Boolean, default: false},
    //图像数据
    imageSrc: {type: String, default: 'http://n.sinaimg.cn/photo/crawl/59/w550h309/20191017/efdf-ifzxhxm6224342.jpg'},
    //宽度
    width: {type: [Number, String], default: ''},
    //高度
    height: {type: [Number, String], default: ''},
    //空间标识，对应于 createObj 当中的 id 参数
    id: {default: ''},
    //提示信息，默认为空，用户可编辑
    title: {default: ''},
    appearanceProp: {
      type: Object, default: _ => ({})
    },
    createObj: {
      type: Object, default: _ => ({})
    }
  },
  data() {
    return {
      typeId: 'imageBox',//组件唯一标识
      typeName: '图像',
      descStr: '图像',
      verNum: 1,
      border: true,
      stroke: false,
      fill: true,
      text: false,
      image: true
    }
  },
  computed: {
    _appearanceProp() {
      if (this.appearanceProp.image === {}) delete this.appearanceProp.image
      return {
        ...{
          border: {type: 0, color: '#f23636', width: 0.3},
          fill: {type: 0, color: '#423611'},
          image: {opacity: '', grayscale: '', brightness: '', contrast: '', saturate: ''}
        },
        ...this.appearanceProp
      }
    },
    styleObj() {
      let obj = {}
      let border = `${this._appearanceProp.border.width}mm solid ${this._appearanceProp.border.color}`
      let backgroundColor = this._appearanceProp.fill.color
      let filter = `opacity(${this._appearanceProp.image.opacity}) grayscale(${this._appearanceProp.image.brightness}) contrast(${this._appearanceProp.image.contrast}) saturate(${this._appearanceProp.image.saturate})`
      //宽
      this.width ? obj.width = this.width + 'mm' : delete obj.width
      //高
      this.height ? obj.height = this.height + 'mm' : delete obj.height
      //边框
      this._appearanceProp.border.type ? obj.border = border : delete obj.border
      //背景色
      this._appearanceProp.fill.type ? obj.backgroundColor = backgroundColor : delete obj.backgroundColor
      //滤镜
      if (this._appearanceProp.image.opacity || this._appearanceProp.image.grayscale || this._appearanceProp.image.contrast || this._appearanceProp.image.saturate) obj.filter = filter
      else delete obj.filter
      return obj
    }
  },
  created() {
    if (this.createObj.width) this.width = this.createObj.width
    if (this.createObj.height) this.height = this.createObj.height
  },
  methods: {
    getAPStream() {
      let obj = {
        dataField: this.dataField,
        readonly: this.readonly,
        required: this.required,
        imageSrc: this.imageSrc,
        width: this.width,
        height: this.height,
        id: this.id,
        title: this.title,
        appearanceProp: this._appearanceProp,
        typeId: this.typeId,
        typeName: this.typeName,
        descStr: this.descStr,
        verNum: this.verNum,
        border: this.border,
        stroke: this.stroke,
        fill: this.fill,
        text: this.text,
        image: this.image,
        styleObj: this.styleObj
      }
      console.log(obj)
      this.$emit('getApStream', obj)
    }
  }
}
</script>

<style scoped>
</style>
